<template>
  <div class="QQ-info">
    <img :src="avatar"/>
    <p>Hi，{{ nickName }} 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
  </div>
</template>

<script lang="ts"
        setup>
import message from '@/components/library/Message/index'
import {onMounted, ref} from 'vue'


let avatar = ref<string>('')
let nickName = ref<string>('')

onMounted(async () => {
  window.QC.api('get_user_info').success((res: any) => {
    if (!res.data) return message.error('页面错误，请尝试重新登录')
    avatar.value = res.data.figureurl_1
    nickName.value = res.data.nickname
  })
})
</script>

<style lang="less"
       scoped>
.QQ-info {
  width: 320px;
  padding: 10px;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;

  img {
    width: 50px;
    height: 50px;
  }

  p {
    flex: 1;
    padding-left: 10px;
  }
}
</style>